<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>賞 . 樂</title>
    <link href="./PNG/icon.jpg" rel="shortcut icon">
    <link href="./CSS/main.css" rel="stylesheet"/>
   	<link href="./CSS/bootstrap.css" rel="stylesheet"/>
    <link href="./CSS/musica.css" rel="stylesheet"/>
</head>
<body style="background:#999">
<div class="container">
    <div class="music_box">
    	<div class="play_box" >
			<div class="row control">
			    <div class="col-xs-2">
				  	<img src="./PNG/atari100.jpeg" width="100" height="100">
					<span id="pernum">0%</span>
					<div id="over"></div>
			  	</div>
			    <div class="col-xs-3" id="musicMsg">
			    	<p class="playMode"><span >顺序播放</span></p>
				  	<p class="color_white mt10" style="overflow: hidden;" style="width: 100%;">
			    		<span class="musicName"></span>
		        	</p>
		            <p class="fs12 author">TFboys</p>
		            <p class="fs12" ><span id="ctimer">00:00</span>/<span id="timer">00:00</span></p>
			  	</div>
				<div class="col-xs-7 controls_right">
			  		<div class="menu_btn">
				  		<a href="javascript:void(0)" id="exlist" class="music_icon musicList color_white">9</a>
		            	<a href="javascript:void(0)">词</a>
				  	</div>
		            <div class="play_btn"> 
		            	<a href="javascript:void(0)" class="music_icon prev_song" onclick="playPrev(this)"><!--上一曲--></a>
		                <a href="javascript:void(0)" id="play" onclick="newPlay()" class="music_icon play_tb"><!--播放--></a>
		                <a href="javascript:void(0)" id="pause" onclick="stop()" class="music_icon pause_tb" style="display:none;"><!--暂停--></a>
		                <a href="javascript:void(0)" class="music_icon next_song" onclick="playNext(this)"><!--下一曲--></a>
		                <!--播放模式控制-->
		                <a href="javascript:void(0)" class="music_icon oder_cycle cycle_mode" id="oder_cycle" onclick="playModeTab(1)"><!--顺序循环--></a>
		                <a href="javascript:void(0)" class="music_icon random_cycle cycle_mode" id="random_cycle" onclick="playModeTab(2)" style="display: none;"><!--随机--></a>
		                <a href="javascript:void(0)" class="music_icon single_cycle cycle_mode" id="single_cycle" onclick="playModeTab(3)" style="display: none;"><!--单曲循环--></a>
		                <!--从头开始播放-->
		                <a href="javascript:void(0)" class=" cycle" onclick="repeat()"><img src="./PNG/replay.png" width=21/></a>
		                <a href="javascript:void(0)" class="music_icon volume" id="muted" onclick="muted(false)"><!--音量--></a>
		                <a href="javascript:void(0)" class="music_icon volume" id="unMuted" onclick="muted(true)"><!--音量--></a>
		                <div style="" class="v_progress" id="v_progress">
		                	<a href="javascript:void(0)" class=" v_percent" id="v_percent"><!--音量进度--></a>
		                </div>
			  		</div>
				</div>
			</div>
			<div class="play_rolling" id="play_rolling">
	    		<li id="percent"></li>
	    	</div>
		</div>
    </div>
	<!--歌曲列表弹出层-->
    <div class="play_list">
    	<div class="play_list_title">
        	<a href="javascript:void(0)" class="fl color_white title_name">播放列表</a>
        </div>
        <div class="play_list_cont">
        	<ul id="music_list">
            	
        	</ul>
        </div>
    </div>
    
    <div class="shrink_box">               	
        <a href="javascript:void(0)" id="expyes" class="music_icon pop_down"><!--点击收回--></a>
        <a href="javascript:void(0)" id="expno" class="music_icon pop_up"><!--点击弹出--></a>
    </div>
</div>   
    
    
	
	<!--dojo.js-->
	<script type="text/javascript" src="./JS/audiopro.js" ></script>
	<script type="text/javascript" src="./JS/audio.js" ></script>
</body>
</html>